<template>
  <!-- 公益项目组件 -->
  <view class="projects">
    <image class="projects-img" mode="aspectFill" />
    <view class="projects-share">
      <hope-button-share bg-color="grey" />
    </view>
    <view class="projects-content">
      <text class="projects-title ellipsis-1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </text>
      <text class="projects-brief ellipsis-2">
        Corrupti cum tenetur beatae non possimus odit recusandae, dolores blanditiis assumenda, vero ipsum voluptatem
        voluptatibus quae placeat dignissimos? Blanditiis temporibus quos impedit.
      </text>
    </view>
    <hope-button title="帮助" />
  </view>
</template>

<style scoped lang="scss">
.projects {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  padding-block: 30rpx;
  /* border-bottom: 1px solid $bg-black-opacity-3; */

  &-img {
    width: 100%;
    height: 300rpx;
    border-radius: 30rpx;
    color: $uni-text-color-grey;
    background-color: $color-skeleton;
  }

  &-share {
    position: absolute;
    top: 40rpx;
    right: 20rpx;

  }

  &-content {
    padding-inline: 20rpx;
  }

  &-title {
    color: $color-skeleton;
    background-color: $color-skeleton;
    font-size: $font-size-base;
  }

  &-brief {
    color: $color-skeleton;
    line-height: 30rpx;
    background-color: $color-skeleton;
    font-size: $font-size-sm;
  }
}
</style>
